<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>删除管理员 - 智能选课系统</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<style type="text/css">
		:root {
			--primary-gradient: linear-gradient(135deg, #667eea, #764ba2);
			--primary-gradient-alt: linear-gradient(135deg, #ff6b6b, #ffa500);
			--secondary-gradient: linear-gradient(135deg, #1d976c, #93f9b9);
			--accent-gradient: linear-gradient(135deg, #50c9c3, #96deda);
			--dark-bg: #0f1116;
			--card-bg: rgba(30, 33, 42, 0.7);
			--border-color: rgba(255, 255, 255, 0.1);
			--text-primary: #ffffff;
			--text-secondary: #b0b0b0;
			--success: #28a745;
			--danger: #dc3545;
			--warning: #ffc107;
			--info: #17a2b8;
			--transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			min-height: 100vh;
		}

		.delete-container {
			max-width: 800px;
			margin: 0 auto;
			background: var(--card-bg);
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			border: 1px solid var(--border-color);
			backdrop-filter: blur(10px);
		}

		.delete-header {
			background: var(--primary-gradient-alt);
			color: white;
			padding: 20px 30px;
			text-align: center;
		}

		.delete-header h3 {
			margin: 0;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.delete-header h3 i {
			margin-right: 10px;
			font-size: 1.5rem;
		}

		.delete-body {
			padding: 30px;
			background-color: white;
			color: #333;
		}

		.table-container {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
			margin-top: 20px;
			border: 1px solid var(--border-color);
		}

		.table {
			margin-bottom: 0;
			color: var(--text-primary);
		}

		.table thead th {
			background: linear-gradient(135deg, #2c3e50, #34495e);
			color: white;
			border: none;
			padding: 15px 20px;
			font-weight: 600;
		}

		.table tbody td {
			padding: 15px 20px;
			border-color: var(--border-color);
			vertical-align: middle;
			background: rgba(255, 255, 255, 0.8);
			color: #333;
		}

		.table tbody tr {
			background-color: rgba(255, 255, 255, 0.8);
		}
		.table tbody tr:hover {
			background-color: rgba(231, 76, 60, 0.1);
		}

		.delete-btn {
			background: var(--primary-gradient-alt);
			color: white;
			border: none;
			border-radius: 6px;
			padding: 8px 16px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		}

		.delete-btn:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
		}

		.delete-btn:disabled {
			background: #95a5a6;
			cursor: not-allowed;
			transform: none;
			box-shadow: none;
		}

		.message-container {
			margin-bottom: 20px;
		}

		.error-message {
			background: var(--primary-gradient-alt);
			color: white;
			padding: 15px 20px;
			border-radius: 8px;
			margin-bottom: 15px;
			font-weight: 600;
		}

		.success-message {
			background: var(--secondary-gradient);
			color: white;
			padding: 15px 20px;
			border-radius: 8px;
			margin-bottom: 15px;
			font-weight: 600;
		}

		.back-btn {
			display: block;
			text-align: center;
			margin-top: 25px;
		}

		.back-btn a {
			display: inline-block;
			padding: 10px 20px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 5px;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			text-decoration: none;
			color: white;
		}

		@media (max-width: 768px) {
			.delete-body {
				padding: 20px 15px;
			}

			.table thead th,
			.table tbody td {
				padding: 10px 15px;
			}
		}
	</style>
</head>
<body>
<div class="delete-container">
	<div class="delete-header">
		<h3><i class="fas fa-user-times"></i> 删除管理员</h3>
	</div>

	<div class="delete-body">
		<!-- 显示错误信息 -->
		<c:if test="${not empty errorMessage}">
			<div class="error-message">
				<i class="fas fa-exclamation-circle"></i> ${errorMessage}
			</div>
		</c:if>

		<!-- 显示成功信息 -->
		<c:if test="${not empty successMessage}">
			<div class="success-message">
				<i class="fas fa-check-circle"></i> ${successMessage}
			</div>
		</c:if>

		<div class="table-container">
			<table class="table table-hover">
				<thead>
				<tr>
					<th>用户名</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
				<c:forEach items="${managers}" var="manager">
					<tr>
						<td>${manager.name}</td>
						<td>
							<form action="${pageContext.request.contextPath}/RemoveManager_Servlet" method="post" style="display: inline;">
								<input type="hidden" name="managerName" value="${manager.name}">
								<button type="submit" class="delete-btn" onclick="return confirm('确定要删除管理员 ${manager.name} 吗？')">
									<i class="fas fa-trash-alt"></i> 删除
								</button>
							</form>
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>

		<div class="back-btn">
			<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
		</div>
	</div>
</div>
</body>
</html>